<template>
    <div>
        <button id="convertButton" @click="downloadPdf">下载 PDF</button>
        <router-link to="/main/ruzhi/ruzhientry" style="margin-left: 30px;">返回</router-link>
        <div class="container" id="content">
            <h2>员工入职资料表</h2>
            <span style="float: left;">
                申请职位：
                <input type="text" id="name" class="underline-input" v-model="entr.applicationPosition" disabled />
            </span>
            <span class="right-float">
                申请日期：
                <input type="text" class="underline-input1" v-model="entr.applicationYear" disabled />年
                <input type="text" class="underline-input1" v-model="entr.applicationMonth" disabled />月
                <input type="text" class="underline-input1" v-model="entr.applicationDay" disabled />日
            </span>
            <form style="margin-top: 5px;">
                <table>
                    <tbody>
                        <tr>
                            <td colspan="10" style="text-align: left">一、个人基本资料</td>
                        </tr>
                        <tr>
                            <td colspan="1">姓名</td>
                            <td colspan="2"><input disabled v-model="entr.name"></td>
                            <td colspan="1">性别</td>
                            <td colspan="1"><input disabled v-model="entr.gender"></td>
                            <td colspan="1">出生年月</td>
                            <td colspan="2"><input disabled v-model="entr.birth"></td>
                            <td rowspan="8" colspan="2" class="img">
                                <span style="float: inline-end" id="uploadSpan" :style="{ display: uploadSpanDisplay }">
                                    照片
                                    <input title="图片" type="file" id="imageUpload" accept="image/*"
                                        @change="handleImageUpload" />
                                </span>
                                <span id="previewSpan" :style="{ display: previewSpanDisplay }">
                                    <img style="height: 49mm; width: 35mm;border: 0px;object-fit: cover;" id="preview"
                                        :src="previewImageSrc" alt="预览图片" />
                                    <button id="deleteBtn" @click="deleteImage">删除</button>
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td>籍贯</td>
                            <td>{{ entr.hometown }}</td>
                            <!-- <td><input disabled v-model="entr.hometown"></td> -->
                            <td>身高</td>
                            <td><input style="width: 55%;" disabled v-model="entr.height">cm</td>
                            <td colspan="2">文化程度</td>
                            <td colspan="2"><input disabled v-model="entr.educationLevel"></td>
                        </tr>
                        <tr>
                            <td>专业</td>
                            <td colspan="2">{{ entr.major }}</td>
                            <!-- <td colspan="2"><input disabled v-model="entr.major"></td> -->
                            <td colspan="2">毕业学校</td>
                            <td colspan="3"><input disabled v-model="entr.graduationSchool"></td>
                        </tr>
                        <tr>
                            <td>婚否</td>
                            <td><input disabled v-model="entr.married"></td>
                            <td>健康状况</td>
                            <td><input disabled v-model="entr.healthCondition"></td>
                            <td>语言能力</td>
                            <td colspan="3">
                                语种:<span><input disabled style="width: 50px;height: 20px;"
                                        v-model="entr.language"></span> （
                                <span><input disabled style="width: 20px;height: 20px;"
                                        v-model="entr.languageLevel"></span> ）级
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">其他技能或持有专业证照</td>
                            <td colspan="2"><input disabled v-model="entr.otherSkills"></td>
                            <td>特长</td>
                            <td colspan="2"><input disabled v-model="entr.specialty"></td>
                        </tr>
                        <tr></tr>
                        <tr>
                            <td colspan="2">现住地址</td>
                            <td colspan="3"><input disabled v-model="entr.currentAddress"></td>
                            <td>联系电话</td>
                            <td colspan="2"><input disabled v-model="entr.contactPhone"></td>
                        </tr>
                        <tr>
                            <td colspan="2">职位信息来源</td>
                            <td colspan="2"><input disabled v-model="entr.jobInfoSource"></td>
                            <td>期望薪酬</td>
                            <td><input disabled v-model="entr.expectedSalary"></td>
                            <td>最快到职日期</td>
                            <td>{{ entr.earliestStart }}</td>
                            <!-- <td><input disabled v-model="entr.earliestStart"></td> -->
                        </tr>
                        <tr></tr>
                        <tr>
                            <td rowspan="2" colspan="2">紧急联系人</td>
                            <td colspan="3">姓名（尽量为直系亲属）</td>
                            <td colspan="2"><input disabled v-model="entr.emergencyContactName"></td>
                            <td>关系</td>
                            <td colspan="2"><input disabled v-model="entr.emergencyContactRelation"></td>
                        </tr>
                        <tr>
                            <td colspan="2">通讯地址</td>
                            <td colspan="3">{{ entr.emergencyContactAddress }}</td>
                            <!-- <td colspan="3"><input disabled v-model="entr.emergencyContactAddress"></td> -->
                            <td>电话</td>
                            <td colspan="2"><input disabled v-model="entr.emergencyContactPhone"></td>
                        </tr>
                        <tr>
                            <td colspan="10" style="text-align: left">
                                二、受教育程度或培训经历
                            </td>
                        </tr>
                        <tr>
                            <th colspan="2">学校名称</th>
                            <th>专业</th>
                            <th>学历</th>
                            <th>入学年月</th>
                            <th>离校年月</th>
                            <th>毕业或结业</th>
                            <th>有否证件</th>
                            <th colspan="2">备注</th>
                        </tr>
                        <tr>
                            <!-- <td colspan="2"><input disabled v-model="entr.schoolName"></td> -->
                            <td colspan="2">{{ entr.schoolName }}</td>
                            <!-- // 学校名称 -->
                            <td>{{ entr.schoolMajor }}</td>
                            <!-- <td><input disabled v-model="entr.schoolMajor"></td> -->
                            <!-- // 专业 -->
                            <td>{{ entr.schoolEducation }}</td>
                            <!-- <td><input disabled v-model="entr.schoolEducation"></td> -->
                            <!-- // 学历 -->
                            <td>{{ entr.admission }}</td>
                            <!-- <td><input disabled v-model="entr.admission"></td> -->
                            <!-- //入学年月 -->
                            <td>{{ entr.graduation }}</td>
                            <!-- <td><input disabled v-model="entr.graduation"></td> -->
                            <!-- // 离校年月 -->
                            <td><input disabled v-model="entr.graduationStatus"></td>
                            <!-- // 毕业或结业 -->
                            <td><input disabled v-model="entr.hasCertificate"></td>
                            <!-- // 有否证件 -->
                            <td colspan="2">{{ entr.schoolNote }}</td>
                            <!-- <td colspan="2"><input disabled v-model="entr.schoolNote"></td> -->
                            <!-- // 备注 -->
                        </tr>
                        <tr>
                            <td colspan="2">{{ entr.schoolName2 }}</td>
                            <td>{{ entr.schoolMajor2 }}</td>
                            <td>{{ entr.schoolEducation2 }}</td>
                            <td>{{ entr.admission2 }}</td>
                            <td>{{ entr.graduation2 }}</td>
                            <td><input disabled v-model="entr.graduationStatus2"></td>
                            <td><input disabled v-model="entr.hasCertificate2"></td>
                            <td colspan="2">{{ entr.schoolNote2 }}</td>
                        </tr>
                        <tr>
                            <td colspan="2">{{ entr.schoolName3 }}</td>
                            <td>{{ entr.schoolMajor3 }}</td>
                            <td>{{ entr.schoolEducation3 }}</td>
                            <td>{{ entr.admission3 }}</td>
                            <td>{{ entr.graduation3 }}</td>
                            <td><input disabled v-model="entr.graduationStatus3"></td>
                            <td><input disabled v-model="entr.hasCertificate3"></td>
                            <td colspan="2">{{ entr.schoolNote3 }}</td>
                        </tr>
                        <tr>
                            <td colspan="10" style="text-align: left">三、工作经历</td>
                        </tr>
                        <tr>
                            <th colspan="2">单位名称</th>
                            <th>到职年月</th>
                            <th>离职年月</th>
                            <th>工作职务</th>
                            <th>底薪</th>
                            <th>直系主管</th>
                            <th>离职原因</th>
                            <th colspan="2">查询电话</th>
                        </tr>
                        <tr>
                            <td colspan="2"><input disabled v-model="entr.companyName"></td>
                            <!-- // 单位名称 -->
                            <td><input disabled v-model="entr.join"></td>
                            <!-- // 到职年月 -->
                            <td><input disabled v-model="entr.leave"></td>
                            <!-- // 离职年月 -->
                            <td><input disabled v-model="entr.jobTitle"></td>
                            <!-- // 工作职务 -->
                            <td><input disabled v-model="entr.baseSalary"></td>
                            <!-- // 底薪 -->
                            <td><input disabled v-model="entr.directSupervisor"></td>
                            <!-- // 直系主管 -->
                            <td>{{ entr.leaveReason }}</td>
                            <!-- // 离职原因 -->
                            <td colspan="2"><input disabled v-model="entr.inquiryPhone"></td>
                            <!-- // 查询电话 -->

                        </tr>
                        <tr>
                            <td colspan="2"><input disabled v-model="entr.companyName2"></td>
                            <td><input disabled v-model="entr.join2"></td>
                            <td><input disabled v-model="entr.leave2"></td>
                            <td><input disabled v-model="entr.jobTitle2"></td>
                            <td><input disabled v-model="entr.baseSalary2"></td>
                            <td><input disabled v-model="entr.directSupervisor2"></td>
                            <td>{{ entr.leaveReason2 }}</td>
                            <td colspan="2"><input disabled v-model="entr.inquiryPhone2"></td>
                        </tr>
                        <tr>
                            <td colspan="2"><input disabled v-model="entr.companyName3"></td>
                            <td><input disabled v-model="entr.join3"></td>
                            <td><input disabled v-model="entr.leave3"></td>
                            <td><input disabled v-model="entr.jobTitle3"></td>
                            <td><input disabled v-model="entr.baseSalary3"></td>
                            <td><input disabled v-model="entr.directSupervisor3"></td>
                            <td>{{ entr.leaveReason3 }}</td>
                            <td colspan="2"><input disabled v-model="entr.inquiryPhone3"></td>
                        </tr>
                        <tr>
                            <td colspan="2"><input disabled type="text" v-model="entr.companyName4" /></td>
                            <td><input disabled v-model="entr.join4"></td>
                            <td><input disabled v-model="entr.leave4"></td>
                            <td><input disabled v-model="entr.jobTitle4"></td>
                            <td><input disabled v-model="entr.baseSalary4"></td>
                            <td><input disabled v-model="entr.directSupervisor4"></td>
                            <td>{{ entr.leaveReason4 }}</td>
                            <td colspan="2"><input disabled v-model="entr.inquiryPhone4"></td>
                        </tr>
                        <tr>
                            <td colspan="10">
                                <span class="left-float">
                                    详述工作经验（请说明在以往的工作中主要负责和熟悉的部分，并取得了哪些成就）：
                                </span>
                                <textarea spellcheck="false" id="workExperience" placeholder=""
                                    style="width: 100%; height: 100px" v-model="entr.workExperienceDetail"
                                    disabled></textarea>
                                <!-- // 详述工作经验 -->
                            </td>
                        </tr>
                        <tr>
                            <td colspan="10" style="text-align: left">四、家庭成员</td>
                        </tr>
                        <tr>
                            <th>姓名</th>
                            <th>称谓</th>
                            <th>年龄</th>
                            <th colspan="3">任职机构或详细地址</th>
                            <th>职称</th>
                            <th colspan="3">联络电话</th>
                        </tr>
                        <tr>
                            <td><input disabled v-model="entr.familyName"></td>
                            <td><input disabled v-model="entr.familyRelation"></td>
                            <td><input disabled type="text" style="width: 50px" v-model="entr.familyAge" /></td>
                            <td colspan="3">{{ entr.familyAddress }}</td>
                            <td><input disabled v-model="entr.familyTitle"></td>
                            <td colspan="3"><input disabled v-model="entr.familyPhone"></td>
                        </tr>
                        <tr>
                            <td><input disabled v-model="entr.familyName2"></td>
                            <td><input disabled v-model="entr.familyRelation2"></td>
                            <td><input disabled type="text" style="width: 50px" v-model="entr.familyAge2" /></td>
                            <td colspan="3">{{ entr.familyAddress2 }}</td>
                            <td><input disabled v-model="entr.familyTitle2"></td>
                            <td colspan="3"><input disabled v-model="entr.familyPhone2"></td>
                        </tr>
                        <tr>
                            <td style="border: 0px">声明：</td>
                            <td colspan="9" style="border: 0px; text-align: left">
                                1、申请人承诺未隐瞒任何身体疾病，否则由此造成的一切后果由申请人自行承担，申请人隐瞒的疾病导致其不能胜任申请职位的，公司有权终止劳动合同并无需支付任何经济补偿金或赔偿金。
                            </td>
                        </tr>
                        <tr>
                            <td style="border: 0px"></td>
                            <td colspan="9" style="border: 0px; text-align: left">
                                2、本人慎重申明以上所填各项及所持证件均属实，如有虚伪记载，愿受开除处分。
                            </td>
                        </tr>
                    </tbody>
                </table>
                <p style="display: flex;align-items: center;margin: 0px;">
                    申请人签名：
                    <!-- <input disabled type="text" class="underline-input disabled" style="width: 200px" v-model="entr.signature" /> -->
                    <!-- //获取签名图片 -->
                    <!-- object-fit: cover; -->
                    <img :src="entr.signature" alt="签名" style="width: 100px; height: 50px; border: 0px; " />
                    <span class="right-float">
                        日期:
                        <input disabled type="text" class="underline-input1" v-model="entr.signYear" />年
                        <input disabled type="text" class="underline-input1" v-model="entr.signMonth" />月
                        <input disabled type="text" class="underline-input1" v-model="entr.signDay" />日
                    </span>
                </p>
            </form>
        </div>
    </div>
</template>

<script>
import html2pdf from "html2pdf.js";
import axios from "axios"; // 引入 axios
// import { da } from "element-plus/es/locale";
export default {
    name: "nuwentryTable",
    data() {
        return {
            previewImageSrc: "",
            uploadSpanDisplay: "none",
            previewSpanDisplay: "inline",
            entr: {
                applicationPosition: "", // 申请职位
                applicationYear: "", // 申请日期
                applicationMonth: "",
                applicationDay: "",
                name: "", // 姓名
                gender: "", // 性别
                birth: "", // 出生年月
                hometown: "", // 籍贯
                height: "", // 身高
                educationLevel: "", // 文化程度
                major: "", // 专业
                graduationSchool: "", // 毕业学校
                married: "", // 婚否
                healthCondition: "", // 健康状况
                language: "", // 语言能力
                languageLevel: "", // 语言能力级别
                otherSkills: "", // 其他技能或持有专业证照
                specialty: "", // 特长
                currentAddress: "", // 现住地址 
                contactPhone: "", // 联系电话
                jobInfoSource: "", // 职位信息来源
                expectedSalary: "", // 期望薪酬
                earliestStartYear: "", // 最快到职日期年
                earliestStartMonth: "", // 最快到职日期月
                earliestStartDay: "", // 最快到职日期日
                emergencyContactName: "", // 紧急联系人姓名
                emergencyContactRelation: "", // 紧急联系人关系
                emergencyContactAddress: "", // 紧急联系人通讯地址
                emergencyContactPhone: "", // 紧急联系人电话  
                schoolName: "", // 学校名称
                schoolMajor: "", // 专业
                schoolEducation: "", // 学历
                admission: "", // 入学年月
                graduation: "", // 离校年月
                graduationStatus: "", // 毕业或结业
                hasCertificate: "", // 有否证件
                schoolNote: "", // 备注
                schoolName2: "", // 学校名称  
                schoolMajor2: "", // 专业
                schoolEducation2: "", // 学历
                admission2: "", // 入学年月
                graduation2: "", // 离校年月
                graduationStatus2: "", // 毕业或结业
                hasCertificate2: "", // 有否证件
                schoolNote2: "", // 备注
                schoolName3: "", // 学校名称  
                schoolMajor3: "", // 专业
                schoolEducation3: "", // 学历
                admission3: "", // 入学年月 
                graduation3: "", // 离校年月
                graduationStatus3: "", // 毕业或结业
                hasCertificate3: "", // 有否证件
                schoolNote3: "", // 备注
                companyName: "", // 单位名称
                join: "", // 到职年月
                leave: "", // 离职年月
                jobTitle: "", // 工作职务
                baseSalary: "", // 底薪
                directSupervisor: "", // 直系主管
                leaveReason: "", // 离职原因
                inquiryPhone: "", // 查询电话
                companyName2: "", // 单位名称
                join2: "", // 到职年月
                leave2: "", // 离职年月
                jobTitle2: "", // 工作职务
                baseSalary2: "", // 底薪  
                directSupervisor2: "", // 直系主管
                leaveReason2: "", // 离职原因
                inquiryPhone2: "", // 查询电话
                companyName3: "", // 单位名称 
                join3: "", // 到职年月
                leave3: "", // 离职年月
                jobTitle3: "", // 工作职务
                baseSalary3: "", // 底薪
                directSupervisor3: "", // 直系主管
                leaveReason3: "", // 离职原因
                inquiryPhone3: "", // 查询电话
                familyName: "", // 姓名
                familyRelation: "", // 关系
                familyAge: "", // 年龄
                familyAddress: "", // 通讯地址
                familyPhone: "", // 电话
                familyName2: "", // 姓名
                familyRelation2: "", // 关系
                familyAge2: "", // 年龄
                familyAddress2: "", // 通讯地址
                familyPhone2: "", // 电话
                familyName3: "", // 姓名
                familyRelation3: "", // 关系
                familyAge3: "", // 年龄
                familyAddress3: "", // 通讯地址
                familyPhone3: "", // 电话
                workExperienceDetail: "", // 详述工作经验
                signature: null, // 签名
                signYear: "", // 签名日期年
                signMonth: "", // 签名日期月
                signDay: "", // 签名日期日
            },
            index: length - 1,
        };
    },
    created() {
        this.fetchEmployeeData();
    },
    methods: {
        fetchEmployeeData() {
            axios.get("/amsp/entry/list")
                .then(response => {
                    const res = response.data;
                    // const data = res[this.index];
                    const data = res[res.length - 1];
                    console.log("11111", data);
                    this.previewImageSrc = data.imageUrl,// 照片
                        // 将获取的数据赋值给 entr 对象
                        this.entr = {

                            applicationPosition: data.applicationPosition,// 申请职位
                            applicationYear: data.applicationYear,// 申请日期
                            applicationMonth: data.applicationMonth,// 申请日期
                            applicationDay: data.applicationDay,// 申请日期
                            name: data.name,  // 姓名
                            gender: data.gender,  // 性别
                            birth: (data.birthYear && data.birthMonth && data.birthDay) ? data.birthYear + "年" + data.birthMonth + "月" + data.birthDay + "日" : "",  // 出生年月
                            hometown: data.hometown,  // 籍贯
                            height: data.height,  // 身高
                            educationLevel: data.educationLevel,  // 文化程度
                            major: data.major,  // 专业
                            graduationSchool: data.graduationSchool,  // 毕业学校
                            married: data.married,  // 婚否
                            healthCondition: data.healthCondition,  // 健康状况
                            language: data.language,  // 语言能力
                            languageLevel: data.languageLevel,  // 语言能力级别
                            otherSkills: data.otherSkills,  // 其他技能或持有专业证照
                            specialty: data.specialty,    // 特长
                            currentAddress: data.currentAddress,  // 现住地址
                            contactPhone: data.contactPhone,  // 联系电话
                            jobInfoSource: data.jobInfoSource,  // 职位信息来源
                            expectedSalary: data.expectedSalary,  // 期望薪酬
                            earliestStart: (data.earliestStartYear && data.earliestStartMonth && data.earliestStartDay) ? data.earliestStartYear + "年" + data.earliestStartMonth + "月" + data.earliestStartDay + "日" : "",  // 最快到职日期
                            emergencyContactName: data.emergencyContactName,  // 紧急联系人姓名
                            emergencyContactRelation: data.emergencyContactRelation,  // 紧急联系人关系
                            emergencyContactAddress: data.emergencyContactAddress,  // 紧急联系人通讯地址
                            emergencyContactPhone: data.emergencyContactPhone,  // 紧急联系人电话
                            schoolName: data.schoolName,  // 学校名称
                            schoolMajor: data.schoolMajor,  // 专业
                            schoolEducation: data.schoolEducation,  // 学历
                            admission: (data.admissionYear && data.admissionMonth) ? data.admissionYear + "年" + data.admissionMonth + "月" : "",  // 入学年月
                            graduation: (data.graduationYear && data.graduationMonth) ? data.graduationYear + "年" + data.graduationMonth + "月" : "",  // 离校年月
                            graduationStatus: data.graduationStatus,  // 毕业或结业
                            hasCertificate: data.hasCertificate,  // 有否证件
                            schoolNote: data.schoolNote,  // 备注
                            schoolName2: data.schoolName2,  // 学校名称
                            schoolMajor2: data.schoolMajor2,  // 专业
                            schoolEducation2: data.schoolEducation2,  // 学历
                            admission2: (data.admissionYear2 && data.admissionMonth2) ? data.admissionYear2 + "年" + data.admissionMonth2 + "月" : "",  // 入学年月
                            graduation2: (data.graduationYear2 && data.graduationMonth2) ? data.graduationYear2 + "年" + data.graduationMonth2 + "月" : "",  // 离校年月
                            graduationStatus2: data.graduationStatus2,  // 毕业或结业
                            hasCertificate2: data.hasCertificate2,  // 有否证件
                            schoolNote2: data.schoolNote2,  // 备注
                            schoolName3: data.schoolName3,  // 学校名称
                            schoolMajor3: data.schoolMajor3,  // 专业
                            schoolEducation3: data.schoolEducation3,  // 学历
                            admission3: (data.admissionYear3 && data.admissionMonth3) ? data.admissionYear3 + "年" + data.admissionMonth3 + "月" : "",  // 入学年月
                            graduation3: (data.graduationYear3 && data.graduationMonth3) ? data.graduationYear3 + "年" + data.graduationMonth3 + "月" : "",  // 离校年月
                            graduationStatus3: data.graduationStatus3,  // 毕业或结业
                            hasCertificate3: data.hasCertificate3,  // 有否证件
                            schoolNote3: data.schoolNote3,  // 备注
                            companyName: data.companyName,  // 单位名称
                            join: (data.joinYear && data.joinMonth) ? data.joinYear + "年" + data.joinMonth + "月" : "",  // 到职年月
                            leave: (data.leaveYear && data.leaveMonth) ? data.leaveYear + "年" + data.leaveMonth + "月" : "",  // 离职年月
                            jobTitle: data.jobTitle,  // 工作职务
                            baseSalary: data.baseSalary,  // 底薪
                            directSupervisor: data.directSupervisor,  // 直系主管
                            leaveReason: data.leaveReason,  // 离职原因
                            inquiryPhone: data.inquiryPhone,  // 查询电话
                            companyName2: data.companyName2,  // 单位名称 
                            join2: (data.joinYear2 && data.joinMonth2) ? data.joinYear2 + "年" + data.joinMonth2 + "月" : "",  // 到职年月,    // 到职年月
                            leave2: (data.leaveYear2 && data.leaveMonth2) ? data.leaveYear2 + "年" + data.leaveMonth2 + "月" : "",  // 离职年月
                            jobTitle2: data.jobTitle2,  // 工作职务
                            baseSalary2: data.baseSalary2,  // 底薪
                            directSupervisor2: data.directSupervisor2,  // 直系主管
                            leaveReason2: data.leaveReason2,  // 离职原因
                            inquiryPhone2: data.inquiryPhone2,  // 查询电话
                            companyName3: data.companyName3,  // 单位名称
                            join3: (data.joinYear3 && data.joinMonth3) ? data.joinYear3 + "年" + data.joinMonth3 + "月" : "",  // 到职年月
                            leave3: (data.leaveYear3 && data.leaveMonth3) ? data.leaveYear3 + "年" + data.leaveMonth3 + "月" : "",  // 离职年月
                            jobTitle3: data.jobTitle3,  // 工作职务
                            baseSalary3: data.baseSalary3,  // 底薪
                            directSupervisor3: data.directSupervisor3,  // 直系主管
                            leaveReason3: data.leaveReason3,  // 离职原因
                            inquiryPhone3: data.inquiryPhone3,  // 查询电话
                            companyName4: data.companyName4,  // 单位名称 
                            join4: (data.joinYear4 && data.joinMonth4) ? data.joinYear4 + "年" + data.joinMonth4 + "月" : "",  // 到职年月
                            leave4: (data.leaveYear4 && data.leaveMonth4) ? data.leaveYear4 + "年" + data.leaveMonth4 + "月" : "",  // 离职年月
                            jobTitle4: data.jobTitle4,  // 工作职务
                            baseSalary4: data.baseSalary4,  // 底薪
                            directSupervisor4: data.directSupervisor4,  // 直系主管
                            leaveReason4: data.leaveReason4,  // 离职原因
                            inquiryPhone4: data.inquiryPhone4,  // 查询电话 
                            familyName: data.familyName,  // 姓名
                            familyRelation: data.familyRelation,  // 称谓
                            familyAge: data.familyAge,  // 年龄
                            familyAddress: data.familyAddress,  // 通讯地址
                            familyPhone: data.familyPhone,  // 电话
                            familyName2: data.familyName2,  // 姓名
                            familyRelation2: data.familyRelation2,  // 称谓
                            familyAge2: data.familyAge2,  // 年龄
                            familyAddress2: data.familyAddress2,  // 通讯地址
                            familyPhone2: data.familyPhone2,  // 电话
                            familyName3: data.familyName3,  // 姓名
                            familyRelation3: data.familyRelation3,  // 称谓
                            familyAge3: data.familyAge3,  // 年龄
                            familyAddress3: data.familyAddress3,  // 通讯地址
                            familyPhone3: data.familyPhone3,  // 电话
                            workExperienceDetail: data.workExperienceDetail,    // 详述工作经验
                            signature: data.signature,  // 签名
                            signYear: data.signYear,  // 签名日期
                            signMonth: data.signMonth,  // 签名日期
                            signDay: data.signDay,  // 签名日期
                        };
                    console.log("22222", this.entr.applicationPosition);
                })
                .catch(error => {
                    console.error("Error fetching employee data:", error);
                });
        },
        //     handleImageUpload(event) {
        //   const file = event.target.files[0];
        //   if (file) {
        //     this.previewImageSrc = URL.createObjectURL(file);
        //     this.previewSpanDisplay = 'block'; // 显示预览区域
        //   }
        // },
        handleImageUpload(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.previewImageSrc = e.target.result;
                    this.uploadSpanDisplay = "none";
                    this.previewSpanDisplay = "inline";
                };
                reader.readAsDataURL(file);
            }
        },
        deleteImage() {
            const imageUpload = document.getElementById("imageUpload");
            imageUpload.value = "";
            this.previewImageSrc = "";
            this.uploadSpanDisplay = "inline";
            this.previewSpanDisplay = "none";
        },
        downloadPdf() {
            const element = document.getElementById("content");
            const opt = {
                margin: 10, // 适当增加边距
                filename: "员工入职资料表.pdf",
                image: { type: "", quality: 0.98 },
                html2canvas: { scale: 1.1 }, // 调整缩放比例
                jsPDF: { unit: "mm", format: "A4", orientation: "portrait" }, // 设置为 A4 格式
            };
            html2pdf().from(element).set(opt).save();
        },
    },
};
</script>
<style scoped>
body {
    font-family: "宋体";
    font-size: 14px !important;
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

td,
th {
    border: 1px solid #000;
    text-align: center;
    width: 100px;
    outline: none;
    height: 26px;
    padding: 0px;
}

h2 {
    padding-left: 260px;
    margin-top: 0px;
}

.underline-input {
    border: none;
    border-bottom: 1px solid #000;
    width: 200px;
    font-size: 16px;
    outline: none;
    background: transparent;
    text-align: center;
}

.underline-input1 {
    border: none;
    border-bottom: 1px solid #000;
    width: 40px;
    font-size: 16px;
    outline: none;
    background: transparent;
    text-align: center;
}

input {
    width: 87%;
    height: 75%;
    outline: none;
    border: 0px;
    text-align: center;
    background-color: transparent;
    font-family: "宋体";
    color: #000000;
}

.no {
    border: none;
}

#preview {
    width: 300px;
    height: auto;
    border: 1px solid #ccc;
}

#previewSpan {
    position: relative;
    /* display: none; */
}

#deleteBtn {
    display: none;
    position: absolute;
    top: -170px;
    right: 5px;
    background-color: #cdcdcd;
    color: #000000;
    border: none;
    padding: 5px;
    cursor: pointer;
    border-radius: 5px;
}

#previewSpan:hover #deleteBtn {
    display: block;
}

.left-float {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.right-float {
    position: absolute;
    left: 420px;
}

#workExperience {
    outline: none;
    width: 100%;
    height: 100px;
    padding: 5px;
    box-sizing: border-box;
    resize: none;
    border: 0px;
    font-size: 14px;
    background-color: transparent;
    color: #000000;
}

::placeholder {
    color: black;
}

@media print {
    table {
        width: 100%;
    }

    td,
    th {
        width: auto;
    }

    input {
        width: 90%;
    }

    /* 设置页面边距 */
    @page {
        margin: 10mm;
        size: A4 portrait;
    }

    /* 调整页面布局 */
    body {
        font-size: 12pt !important;
    }

    table {
        width: 90%;
        border-collapse: collapse;
        page-break-inside: avoid;
    }

    td,
    th {
        border: 1px solid #000;
        padding: 5px;
    }

    .container {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
    }

    /* 调整图片大小 */
    img {
        max-width: 100%;
        height: auto;
    }

    /* 强制分页
    .page-break {
      page-break-after: always;
    } */
}
</style>